<template>
  <div id="dialogcontent">
    <el-row>
      <el-col :span="24">
        <div class="button-box">
          <el-button-group>
            <el-button v-for="(toolbar,index) in toolbarList" :key="index" :type="toolbar.type" :icon="toolbar.icon"
                       @click="getButtonType(toolbar.event)" size="small">{{ $t(toolbar.msg) }}
            </el-button>
          </el-button-group>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="form-box">
          <el-form label-position="left">
            <el-form-item v-for="(item, index) in formStructData" :key="index" v-if="item.show" :label="$t(item.label)"
                          :label-width="formLabelWidth" :prop="item.fieldname" :required="item.required"
                          style="width:80%">
              <el-input v-if="item.type === 'input'" v-model="item.value" :value="item.value" :required="item.required"
                        :disabled="item.disabled" size="small"></el-input>
              <el-select v-if="item.type === 'select'" v-model="item.value" :disabled="item.disabled"
                         :required="item.required" size="small" @change="subsysSelect(item.value,item.fieldname)">
                <el-option v-for="optionitem in item.data" :key="optionitem.ID" :label="optionitem.name"
                           :value="optionitem.ID"></el-option>
              </el-select>
              <el-switch v-if="item.type === 'switch'" v-model="item.value" on-text="" off-text=""
                         :required="item.required" :disabled="item.disabled" size="small"></el-switch>
              <el-date-picker v-if="item.type === 'date-picker'" v-model="item.value" :disabled="item.disabled"
                              align="right" :required="item.required" type="date" :picker-options="pickerOptions1"
                              size="small"></el-date-picker>
              <el-input type="textarea" v-if="item.type === 'editor'" autosize v-model="item.value"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getDialogFormMap, getToolBarList, getComboBoxMap } from '../../assets/js/buildStructure/list.js'
  import { getPosServertMapKey, commonNotify } from '../../assets/js/common.js'
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'dialogcontent',
    props: ['type', 'currentID'],
    created: function () {
      this.getDialogData()
      this.getAuthority()
      this.getToolBars()
    },
    data () {
      return {
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        formLabelWidth: '130px',
        formStructData: [],  //用于构造表单的数据
        toolbarList: [],     //功能按钮
        authority: 0 //保存权限
      }
    },
    mounted: function () {

    },
    methods: {
      //取得用户权限接口
      getAuthority () {
        this.authority = 31
      },
      getDialogData () {
        let _this = this
        if (this.currentID === '' || this.currentID === undefined) {
          this.formStructData = getDialogFormMap([], this.type)
        } else {
          let getKey = getPosServertMapKey(this.type, 'GET')
          let obj = new Object()
          obj.id = this.currentID
          postDataToServer(getKey, obj).then((data) => {
            if (data.status === 0) {
              this.formStructData = getDialogFormMap(data, this.type)
              this.getComboboxData()
            } else {
              commonNotify(_this, 1, 'GET')
              _this.sendStateToList(-1)
            }
          })
        }
      },
      getToolBars () {
        this.toolbarList = getToolBarList('add', this.authority)
      },
      //向父组件传递数据关闭dialog
      sendStateToList (state) {
        this.$emit('stateChange', state)
      },
      //按钮点击事件
      getButtonType (type) {
        let _this = this
        switch (type) {
          case 'save':
            _this.save()
            break
          case 'verify':
            _this.verify()
            break
          case 'unverify':
            _this.unverify()
            break
          case 'delete':
            _this.delete()
            break
          case 'print':
            _this.print()
            break
          default:
            break
        }
      },

      subsysSelect (v1, v2) {
        console.log(v2)
        console.log(v1)
        var fieldmap = getComboBoxMap(v2)
        console.log(fieldmap)
        this.formStructData.forEach(function (val, index, array) {
          if (val.fieldname == fieldmap.serverField) {
            console.log('找到')
            val.value = v1
          }

        })

      },
      //保存
      save () {
        var _this = this
        var errorMsg = new Array()
        var formData = new Object()
        var msg = ''
        this.formStructData.forEach(function (v, index, arr) {
          if (v.required == true && (v.value == '' || v.value === undefined)) {
            msg += `${v.label}为必须项`
          } else {
            formData[v.fieldname] = v.value
          }
        })
        const h = _this.$createElement
        if (msg != '') {
          _this.$notify({
            title: '提交失败',
            message: h('p', {style: 'color: red'}, msg)
          })
          return
        }
        let saveKey = ''
        let tip = 'UPDATE'
        if (formData.id == '' || formData.id == undefined) {
          saveKey = getPosServertMapKey(this.type, 'ADD')
          tip = 'ADD'
          // delete formData.id;//删除id值
        } else {
          saveKey = getPosServertMapKey(this.type, 'EDIT')
        }
        postDataToServer(saveKey, formData).then((data) => {
          let status = data.status
          if (status == undefined) {
            status = 1
          }
          commonNotify(_this, data.status, tip)
          if (status === 0) {
            this.sendStateToList(1)
          }
        })
      },
      //审核
      verify () {
        console.log('verify')
      },
      getComboboxData () {
        let _this = this
        this.formStructData.forEach(function (val, index, array) {
          if (val.type === 'select' && val.data.length == 0) {
            var m = new Array()
            let fieldmap = getComboBoxMap(val.fieldname)
            let field = val.fieldname
            postDataToServer(fieldmap.datasource)
              .then((data) => {
                let list = data.data_list
                list.forEach(function (value, index) {
                  let s = new Object()
                  s.ID = value[fieldmap.valueField]
                  s.name = value[fieldmap.textField]
                  m.push(s)
                })
              })
            val.data = m
          }
        })
      },
      //弃审
      unverify () {
        console.log('unverify')
      },
      //删除
      delete () {
        let _this = this
        let getKey = getPosServertMapKey(this.type, 'DEL')
        let obj = new Object()
        obj.id = this.currentID
        postDataToServer(getKey, obj).then((data) => {
          commonNotify(_this, data.status, 'DEL')
          if (data.status === 0) {
            this.sendStateToList(1)
          }
        })
      },
      //打印
      print () {
        console.log('print')
      }
    },
    watch: {
      currentID: function (val, oldVal) {
        this.getDialogData()
      }
    }
  }
</script>
<style type="text/css" scoped>
  .button-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-bottom: 20px;
  }

  .form-box {
    padding-left: 10px
  }
</style>
